<template>
  <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
    <div class="navbar">"微商城"后台管理系统</div>
    <el-sub-menu class="menu" index="1">
      <template #title>
        <el-avatar class="avatar" :src="admin.avatar || defaultAvatarURL"></el-avatar>
      </template>
      <router-link to="/Setting">
        <el-menu-item index="5">个人中心</el-menu-item>
      </router-link>
      <router-link to="/login">
        <el-menu-item index="6" @click="logout">退出登录</el-menu-item>
      </router-link>
    </el-sub-menu>
  </el-menu>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import removeToken from "../store/token";
import removeAdmin from "../store/admin";
import useAdmin from "../store/admin";

const defaultAvatarURL = "/images/avatar-default.png"

const {admin} = useAdmin()

 
const logout = () => {
  removeToken();
  removeAdmin();
}

const activeIndex = ref("1");

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

</script>
<style scoped>
.el-menu-demo {
  height: 61px;
  line-height: 60px;
  background: linear-gradient(90deg, #1493fa, #01c6fa);
}

.navbar {
  color: white;
  font-size: 20px;
}

.menu {
  margin-left: auto;
}
</style>